<template>
  <div class="item flex-align-items-center" :class="checkbox ? 'flex-between' : 'flex'"
    :style="{ width: checkbox ? '100%' : '1260px', 'min-width': checkbox ? '1335px' : 'none' }">
    <div class="flex flex-align-items-center">
      <el-checkbox v-if="checkbox" size="large" style="margin-right: 10px;" />
      <div class="item-avatar pointer" @click="toDetail">
        <img :src="item.avatar">
        <p class="font-18-M">{{ item.score }}</p>
        <div v-if="item.score" class="flex-center flex-align-items-center">
          <i class="iconfont icon-jiesuo"></i>
        </div>
      </div>
      <div class="item-info">
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <div class="item-name flex flex-align-items-center pointer" @click="toDetail">
              <p class="font-18-B">{{ item.name }}</p>
              <img v-if="item.openEmail" src="@/assets/hasmail.svg">
            </div>
          </template>
          <div class="item-info-explain">
            <p class="font-12">{{ item.name }}</p>
            <p class="font-12">频道ID：{{ item.name }}</p>
          </div>
        </el-popover>
        <div v-if="item.category && item.category.length > 0" class="item-tags flex">
          <p v-for="(tag, tagIndex) in item.category.slice(0, 3)" :key="tagIndex" class="item-tag font-12">
            {{ tag.name }}
          </p>
          <el-popover v-if="item.category.length > 3" width="250" placement="bottom" trigger="hover">
            <template #reference>
              <div class="item-tag-more flex-center flex-align-items-center">
                <i class="iconfont icon-gengduo"></i>
              </div>
            </template>
            <div class="item-all-tags flex flex-wrap">
              <p v-for="(tag, tagIndex) in item.category.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{
                tag.name }}
              </p>
            </div>
          </el-popover>
        </div>
        <div v-if="item.country" class="item-location flex flex-align-items-center">
          <i class="iconfont icon-weizhi"></i>
          <p class="">{{ item.country }}</p>
        </div>
      </div>
      <div class="item-data">
        <div class="flex-between">
          <p class="font-14">粉丝量</p>
          <p class="font-14">{{ numConvert(item.fans_num) }}</p>
        </div>
        <div class="flex-between">
          <p class="font-14">平均观看量</p>
          <p class="font-14">{{ numConvert(item.avg_play_num, 2) }}</p>
        </div>
        <div class="flex-between">
          <p class="font-14">平均互动率</p>
          <p class="font-14">{{ item.avg_interact_rate ? `${item.avg_interact_rate * 100}%` : '-' }}</p>
        </div>
        <div class="flex-between">
          <p class="font-14">商业合作数</p>
          <p class="font-14">{{ numConvert(item.business_num, 2) }}</p>
        </div>
      </div>
      <div class="item-files flex">
        <div v-for="(pro, proIndex) in item.videos.concat(item.images).slice(0, 3)" :key="proIndex"
          class="item-file pointer" @click="toLink(pro.link)">
          <img :src="pro.image">
          <p v-if="pro.type === 'video'" class="flex-center flex-align-items-center">
            <i class="iconfont icon-bofang"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="item-btns flex">
      <el-tooltip content="收藏" placement="top" effect="light">
        <p class="item-btn flex-center flex-align-items-center pointer"
          :class="{ active: item.collect, 'no-click': btnDisable }" @click="influencerFavoriteChange">
          <i class="iconfont" :class="item.collect ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
        </p>
      </el-tooltip>
      <el-tooltip :content="item.openEmail ? '发送邮件' : '该红人暂未公开联系方式'" placement="top" effect="light">
        <p class="item-btn flex-center flex-align-items-center pointer" :class="{ disabled: !item.openEmail }"
          @click="toSend">
          <i class="iconfont icon-a-youjian5"></i>
        </p>
      </el-tooltip>
      <el-tooltip content="更多" placement="top" effect="light">
        <p class="item-btn flex-center flex-align-items-center pointer" @click="moreVideoChange">
          <i class="iconfont icon-gengduo1"></i>
        </p>
      </el-tooltip>
    </div>
  </div>

  <more-video v-if="moreVideoShow" :item="item" @close="moreVideoShow = false"></more-video>
</template>

<script setup>
import MoreVideo from '@/components/moreVideo.vue';
import { defineProps, defineEmits, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import numConvert from '@/js/numConvert';
import api from '@/api/index.js';
import { ElMessage } from 'element-plus';

const router = useRouter();
const store = useStore();

const props = defineProps(['item']);
const emit = defineEmits(['change']);

const moreVideoShow = ref(false);
const btnDisable = ref(false);

const toDetail = () => {
  if (store.state.token) {
    router.push(`/kocNewDetail?id=${props.item.influencer_id}`);
  } else {
    router.push('/login');
  }
}
const toLink = url => {
  window.open(url, '_blank');
}
// 收藏或取消收藏
const influencerFavoriteChange = () => {
  let inter = null;
  if (props.item.collect) {
    inter = api.sensation.unfavoriteInfluencer;
  } else {
    inter = api.sensation.favoriteInfluencer;
  }
  btnDisable.value = true;
  inter({ influencerId: props.item.influencer_id }).then(() => {
    if (props.item.collect) {
      ElMessage.success('取消收藏成功');
    } else {
      ElMessage.success('收藏成功');
    }
    btnDisable.value = false;
    emit('change', 'collect');
  }).catch(err => {
    btnDisable.value = false;
    ElMessage.error(err.msg);
  });
}
const toSend = () => {
  if (!props.item.openEmail) {
    return
  }
  if (store.state.token) {
    router.push(`/writeEmail?id=${props.item.influencer_id}`);
  } else {
    router.push('/login');
  }
}
const moreVideoChange = () => {
  if (store.state.token) {
    moreVideoShow.value = true;
  } else {
    router.push('/login');
  }
}
</script>

<style lang="less" scoped>
.item {
  height: 152px;
  margin: 0 auto;
  padding: 0 16px;
  border-bottom: 1px solid #ebeef5;

  .item-avatar {
    width: 90px;
    height: 90px;
    position: relative;
    margin-right: 16px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
      text-align: center;
      line-height: 45px;
      color: #fff;
    }

    div {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 28px;
      height: 28px;
      background: @main-color;
      border-radius: 50%;

      i {
        color: #fff;
      }
    }
  }

  .item-info {
    width: 254px;
    height: 90px;
    margin-right: 24px;

    .item-name {
      margin-bottom: 4px;

      &:hover {
        p {
          color: @main-color;
        }
      }

      p {
        color: #333;
        max-width: 230px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      img {
        margin-left: 8px;
        width: 20px;
      }
    }

    .item-tags {
      .item-tag {
        margin: 0 8px 10px 0;
        line-height: 24px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;
        font-size: 12px;
        padding: 0 8px;
        color: #606266;
      }

      .item-tag-more {
        width: 26px;
        height: 26px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;

        i {
          color: #606266;
        }
      }
    }

    .item-location {
      i {
        color: #dcdee0;
        margin-right: 4px;
      }

      p {
        color: #666;
      }
    }
  }

  .item-data {
    width: 176px;
    margin-right: 32px;

    div {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      p {
        color: #606266;
      }
    }
  }

  .item-files {
    width: 484px;

    .item-file {
      width: 146px;
      height: 88px;
      margin-right: 8px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;

      &:hover {
        img {
          transform: scale(1.2);
        }

        p::after {
          background: @main-color;
          opacity: 1;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }

      p {
        position: absolute;
        left: 56px;
        top: 28px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 10;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.2;
        }

        i {
          position: relative;
          z-index: 20;
          color: #fff;
        }
      }
    }
  }

  .item-btns {
    .item-btn {
      width: 40px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 14px;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      &.no-click {
        pointer-events: none;
      }

      &.disabled {
        cursor: no-drop;

        i {
          color: #dcdee0 !important;
        }
      }

      &.active {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      i {
        color: #999;
      }
    }
  }
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}

.item-info-explain {
  padding: 10px;
}
</style>
